<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>PMMS - Project</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="">
        <meta name="author" content="">

        <!-- Le styles -->
        <link href="css/bootstrap.css" rel="stylesheet">
        <style type="text/css">
            body {
                padding-top: 60px;
                padding-bottom: 40px;
            }
            .sidebar-nav {
                padding: 9px 0;
            }

            @media (max-width: 980px) {
                /* Enable use of floated navbar text */
                .navbar-text.pull-right {
                    float: none;
                    padding-left: 5px;
                    padding-right: 5px;
                }
            }
        </style>

        <link rel="stylesheet" href="css/main.css">

        <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
        <!--[if lt IE 9]>
          <script src="../assets/js/html5shiv.js"></script>
        <![endif]-->

        <!-- Fav and touch icons -->
        <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
        <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-57x57-precomposed.png">
        <link rel="shortcut icon" href="favicon.png">

        <link rel="stylesheet" href="css/style.css" />
        <link rel="stylesheet" href="css/bootstrap.css" />
        <link rel="stylesheet" href="css/prettify.css" />

        <script src="js/jquery-1.7.min.js"></script>
        <script src="ui/jquery-ui.js"></script>

        <link rel="stylesheet" href="themes/base/jquery.ui.all.css">

        <script src="ui/jquery.ui.core.js"></script>
        <script src="ui/jquery.ui.widget.js"></script>
        <script src="ui/jquery.ui.mouse.js"></script>
        <script src="ui/jquery.ui.draggable.js"></script>
        <script src="ui/jquery.ui.position.js"></script>
        <script src="ui/jquery.ui.resizable.js"></script>
        <script src="ui/jquery.ui.button.js"></script>
        <script src="ui/jquery.ui.dialog.js"></script>

        <script src="js/jquery.fn.gantt.js"></script>
        <script src="js/bootstrap-tooltip.js"></script>
        <script src="js/bootstrap-popover.js"></script>
        <script src="js/prettify.js"></script>

        <script src="js/wizard.js"></script>

        <script>
            $(document).ready(function() {
                $("div.desc").live("click", function() {
                    id = $(this).attr("data-id");
                    //rowName = $("#RowdId_"+id);
                    //alert(id);
                    $(".bar").each(function() {
                        if (id == this.id.substr(-1, this.id.length)) {
                            lefts = $(this).css("margin-left");
                            $(".dataPanel").animate({"margin-left": "-" + lefts}, "slow"); //codes to animate
                            $(".otherShow").html(lefts);
                        }
                    })
                });

            });
            $(function() {

                "use strict";

                $(".gantt").gantt({
                    source: [{
                            name: "Sprint 0",
                            desc: "Analysis",
                            values: [{
                                    from: "/Date(1323802400000)/",
                                    to: "/Date(1325685200000)/",
                                    label: "Requirement Gathering",
                                    customClass: "ganttRed"
                                }]
                        }, {
                            name: " ",
                            desc: "Scoping",
                            values: [{
                                    from: "/Date(1322611200000)/",
                                    to: "/Date(1323302400000)/",
                                    label: "Scoping",
                                    customClass: "ganttRed"
                                }]
                        }, {
                            name: "Sprint 1",
                            desc: "Development",
                            values: [{
                                    from: "/Date(1323802400000)/",
                                    to: "/Date(1325685200000)/",
                                    label: "Development",
                                    customClass: "ganttGreen"
                                }]
                        }, {
                            name: " ",
                            desc: "Showcasing",
                            values: [{
                                    from: "/Date(1325685200000)/",
                                    to: "/Date(1325695200000)/",
                                    label: "Showcasing",
                                    customClass: "ganttBlue"
                                }]
                        }, {
                            name: "Sprint 2",
                            desc: "Development",
                            values: [{
                                    from: "/Date(1326785200000)/",
                                    to: "/Date(1325785200000)/",
                                    label: "Development",
                                    customClass: "ganttGreen"
                                }]
                        }, {
                            name: " ",
                            desc: "Showcasing",
                            values: [{
                                    from: "/Date(1328785200000)/",
                                    to: "/Date(1328905200000)/",
                                    label: "Showcasing",
                                    customClass: "ganttBlue"
                                }]
                        }, {
                            name: "Release Stage",
                            desc: "Training",
                            values: [{
                                    from: "/Date(1330011200000)/",
                                    to: "/Date(1336611200000)/",
                                    label: "Training",
                                    customClass: "ganttOrange"
                                }]
                        }, {
                            name: " ",
                            desc: "Deployment",
                            values: [{
                                    from: "/Date(1336611200000)/",
                                    to: "/Date(1338711200000)/",
                                    label: "Deployment",
                                    customClass: "ganttOrange"
                                }]
                        }, {
                            name: " ",
                            desc: "Warranty Period",
                            values: [{
                                    from: "/Date(1336611200000)/",
                                    to: "/Date(1349711200000)/",
                                    label: "Warranty Period",
                                    customClass: "ganttOrange"
                                }]
                        }],
                    navigate: "scroll",
                    scale: "weeks",
                    maxScale: "months",
                    minScale: "days",
                    itemsPerPage: 10,
                    onItemClick: function(data) {
                        alert("Item clicked - show some details");
                    },
                    onAddClick: function(dt, rowId) {
                        alert("Empty space clicked - add an item!");
                    },
                    onRender: function() {
                        if (window.console && typeof console.log === "function") {
//                            console.log("chart rendered");
                        }
                    }
                });

                $(".gantt").popover({
                    selector: ".bar",
                    title: "I'm a popover",
                    content: "And I'm the content of said popover.",
                    trigger: "hover"
                });

                prettyPrint();

                $("#start_date").datepicker();

                $("#project_wizard").dialog({
                    autoOpen: false,
                    modal: true,
                    width: 500,
                    height: 500
                });

                $("#create_from_template").dialog({
                    autoOpen: false,
                    modal: true,
                    width: 500,
                    height: 300
                });

                $("#template_preview").tabs();
            });
        </script>
    </head>

    <body>

        <div class="navbar navbar-inverse navbar-fixed-top custom-navbar-inverse">
            <div class="navbar-inner custom-navbar-inner">
                <div class="container-fluid">
                    <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="brand custom-brand" href="#">Project Management and Monitoring System</a>
                    <div class="nav-collapse collapse">
                        <p class="navbar-text pull-right">
                            <span class="welcome">Welcome Philip Mark Gutierrez |</span>
                            <a href="#" class="logout">Logout</a>
                        </p>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row-fluid">
                <div class="span3">
                    <div class="hero-unit custom-hero-unit">
                        <div style="width: 100%">
                            <img src="img/me.png"/>
                            <span class="fullname">Philip Mark Gutierrez</span>
                            <!--<div class="custom-vr" style="height: 100%"></div>-->
                            <p></p>
                        </div>
                        <div style="width: 100%;">

                            <div>
                                <img src="icon/home16.png"/>
                                <a class="navigation-label" href="index.html">Home</a>
                            </div>
                            <div>
                                <img src="icon/contact16.png"/>
                                <a class="navigation-label" href="#">My Profile</a>
                            </div>
                            <div>
                                <img src="icon/task16.png"/>
                                <a class="navigation-label" href="#">Tasks</a>
                            </div>
                            <div>
                                <img src="icon/project16.png"/>
                                <a class="navigation-label-current" href="#">Projects</a>
                            </div>
                            <div>
                                <img src="icon/report16.png"/>
                                <a class="navigation-label" href="#">Reports</a>
                            </div>
                            <div>
                                <img src="icon/structure16.png"/>
                                <a class="navigation-label" href="#">Org. Structure</a>
                            </div>
                            <div>
                                <img src="icon/administrator16.png"/>
                                <a class="navigation-label" href="#">Users</a>
                            </div>
                            <div>
                                <img src="icon/user-group16.png"/>
                                <a class="navigation-label" href="#">Groups</a>
                            </div>
                            <div>
                                <img src="icon/files16.png"/>
                                <a class="navigation-label" href="#">Files</a>
                            </div>
                            <div>
                                <img src="icon/calendar16.png"/>
                                <a class="navigation-label" href="#">Calendar</a>
                            </div>
                            <div>
                                <img src="icon/gear16.png"/>
                                <a class="navigation-label" href="#">Settings</a>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="span9 menu-bar">
                    <div class="row-fluid">
                        <div class="span12">
                            <div class="hero-unit custom-menu-unit"
                                 style="padding: 0px 15px;">
                                <div>
                                    <img src="icon/project16.png"/>
                                    <a class="navigation-label" 
                                       href="#"
                                       onclick="$('#project_wizard').dialog('open');">New Project</a>

                                    <img src="icon/view_project16.png"/>
                                    <a class="navigation-label" href="#">View Project</a>

                                    <img src="icon/view_template16.png"/>
                                    <a class="navigation-label" href="#">View Template</a>
                                </div>
                            </div>
                        </div>

                        <div class="span12 content-bar">
                            <div class="hero-unit custom-content-unit">
                                <div>			
                                    <div class="gantt"></div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div><!--/span-->
            </div><!--/row-->

            <hr class="custom-hr" style="width: 100%;">

            <footer class="custom-footer">
                <p>Developed by Global Strategic Solutions and Services Inc.</p>
            </footer>

        </div><!--/.fluid-container-->

        <div id="project_wizard" title="New Project">
            <div style="height: 350px; border: 1px solid white;">
                <div id="wizard">

                    <div id="wizardcontentwrap">
                        <div id="wizardcontent"> </div>
                    </div>
                    <div style="clear:both"></div>
                </div>
                <!-- Place markup for wizard content for each step below -->
                <div class="wizardcontent" id="step_1">
                    <div>
                        <img src="icon/project16.png"/>
                        <a class="navigation-label" 
                           href="#"
                           onclick="$('#create_from_template').dialog('open');">Create from template</a>
                    </div>

                    <hr class="custom-hr-dialog"/>

                    <table>
                        <tr>
                            <td>Project Name:</td>
                            <td><input id="project_name" type="text"/></td>
                        </tr>
                        <tr>
                            <td>Start Date:</td>
                            <td><input id="start_date" type="text"/></td>
                        </tr>
                        <tr>
                            <td>Estimated Budget:</td>
                            <td>
                                <select id="currency" style="width: 30%;">
                                    <option value="PHP">PHP</option>
                                    <option value="USD">USD</option>
                                </select>
                                <input type="text"
                                       style="width: 61%;"/>
                            </td>
                        </tr>
                    </table>

                    <hr class="custom-hr-dialog"/>

                    <div style="width: 200px; height: 210px;">
                        <p>
                            WBS Drag and Drop widget here
                        </p>
                    </div>
                </div>
                <div class="wizardcontent" id="step_2">
                    <h4>Resources</h4>
                    <div>
                        Search
                    </div>
                    <div>
                        <input type="text"
                               id="resource_search"/>
                    </div>

                    <table>
                        <tr>
                            <td rowspan="3">
                                <textarea style="width: 205px; height: 200px;">Resources here</textarea>
                            </td>
                            <td>
                                <div class="custom-button-small-div">
                                    <img src="img/button_right_arrow.png"
                                         class="custom-button-small"/>
                                </div>
                                <div class="custom-button-small-div">
                                    <img src="img/button_left_arrow.png"
                                         class="custom-button-small"/>
                                </div>
                                <div class="custom-button-small-div">
                                    <img src="img/button_left_arrow_double.png"
                                         class="custom-button-small"/>
                                </div>
                            </td>
                            <td>
                                <textarea style="width: 205px; height: 200px;">Resources here</textarea>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="wizardcontent" id="step_3">
                    Page 3 content here
                </div>
                <div class="wizardcontent" id="step_4">
                    Page 4 content here
                </div>
                <div class="wizardcontent" id="step_5">
                    Page 5 content here
                </div>
            </div>

            <div style="float: right; height: 80px; border: 1px solid white;">
                <button type="submit" 
                        id="previous"
                        class="custom-button-wizard">
                    <img src="img/button_previous.png"/>
                </button>

                <button type="submit" 
                        id="next"
                        class="custom-button-wizard">
                    <img src="img/button_next.png"/>
                </button>

                <img src="img/button_close.png"
                     class="custom-button"
                     onclick="$('#project_wizard').dialog('close');"/>
            </div>
        </div>

        <div id="create_from_template"
             title="Create from a template">
            <table>
                <tr>
                    <td>
                        <select id="selected_template">
                            <option value="My templates">My templates</option>
                            <option value="System templates">System templates</option>
                        </select>
                    </td>
                    <td></td>
                </tr>

                <tr>
                    <td>
                        <input type="text"
                               id="template_search"/>
                    </td>
                    <td>
                        <div id="template_preview">
                            <ul>
                                <li><a href="#tabs-1">Gantt</a></li>
                                <li><a href="#tabs-2">WBS</a></li>
                            </ul>
                            <div id="tabs-1">
                                <p>
                                    Gantt preview here
                                </p>
                            </div>
                            <div id="tabs-2">
                                <p>
                                    WBS preview here
                                </p>
                            </div>
                        </div>
                    </td>
                </tr>

                <tr>
                    <td>
                        <textarea>project templates here</textarea>
                    </td>
                    <td></td>
                </tr>
            </table>

            <div style="float: right;">
                <img src="img/button_close.png"
                     class="custom-button"
                     onclick="$('#create_from_template').dialog('close');"/>
            </div>
        </div>

        <!-- Le javascript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->

        <!--    <script src="js/bootstrap-transition.js"></script>
            <script src="js/bootstrap-alert.js"></script>
            <script src="js/bootstrap-modal.js"></script>
            <script src="js/bootstrap-dropdown.js"></script>
            <script src="js/bootstrap-scrollspy.js"></script>
            <script src="js/bootstrap-tab.js"></script>
            <script src="js/bootstrap-tooltip.js"></script>
            <script src="js/bootstrap-popover.js"></script>
            <script src="js/bootstrap-button.js"></script>
            <script src="js/bootstrap-collapse.js"></script>
            <script src="js/bootstrap-carousel.js"></script>
            <script src="js/bootstrap-typeahead.js"></script>-->

    </body>
</html>
